<script setup lang='ts'>
import { ref } from 'vue';

const showAvatar = ref(true)
enum SizeEnum {
    S = 's',
    M = 'm',
    L = 'l',
    XL = 'xl',
    XXL = 'xxl',
    XXXL = 'xxxl'
}
const sizeData = ref<SizeEnum>(SizeEnum.L)
const changeSize = () => {
    if (sizeData.value === SizeEnum.S) {
        sizeData.value = SizeEnum.L
    } else if (sizeData.value === SizeEnum.L) {
        sizeData.value = SizeEnum.XL
    } else if (sizeData.value === SizeEnum.XL) {
        sizeData.value = SizeEnum.XXL
    } else if (sizeData.value === SizeEnum.XXL) {
        sizeData.value = SizeEnum.XXXL
    } else {
        sizeData.value = SizeEnum.S
    }
}
</script>

<template>
    <div class="container">
        <h1>条件渲染v-show</h1>
        <!-- v-show是display:none来控制显示和隐藏 -->
        <img v-show="showAvatar" class="avatar"
            src="https://img0.baidu.com/it/u=3888875350,2248215970&fm=253&fmt=auto&app=120&f=JPEG?w=503&h=500" alt="">
        <!-- v-if是创建和销毁 -->
        <img v-if="showAvatar" class="avatar"
            src="https://img0.baidu.com/it/u=3888875350,2248215970&fm=253&fmt=auto&app=120&f=JPEG?w=503&h=500" alt="">

        <button @click="showAvatar = !showAvatar">显示/隐藏</button>


        <h1 v-if="sizeData === SizeEnum.S">小孩尺寸</h1>
        <h1 v-else-if="sizeData === SizeEnum.M">模特尺寸</h1>
        <h1 v-else-if="sizeData === SizeEnum.L">美女尺寸</h1>
        <h1 v-else-if="sizeData === SizeEnum.XL">正常尺寸</h1>
        <h1 v-else-if="sizeData === SizeEnum.XXL">微胖尺寸</h1>
        <h1 v-else>一般尺寸</h1>


        <button @click="changeSize">改变尺寸</button>
    </div>
</template>

<style scoped>
.avatar {
    widows: 200px;
    height: 200px;
    border-radius: 50%;
}
</style>